BottomNavigationView是底部導航欄，藉由點擊底部不同欄位顯示或更改上方畫面。

添加依賴

implementation 'com.google.android.material:material:1.1.0-alpha10'

屬性應用

app:menu 將菜單xml文件與BottomNavigationView綁定
app:itemTextColor 文字的顏色
app:itemIconTint 圖標的顏色
app:itemIconSize 圖標大小
app:iteamBackground 背景顏色
app:itemRippleColor 點擊後的水波紋顏色
app:itemTextAppearanceActive 設置選中時文字樣式
app:itemTextAppearanceInactive 設置默認的文字樣式
app:labelVisibilityMode 文字的顯示模式

創建Menu

res/新增menu的資料夾/再New一個menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav1"
        android:icon="@drawable/icon_home"
        android:title="主頁" />
    <item
        android:id="@+id/nav2"
        android:icon="@drawable/icon_photo"
        android:title="相片" />
    <item
        android:id="@+id/nav3"
        android:icon="@drawable/icon_music"
        android:title="音樂" />
    <item
        android:id="@+id/nav4"
        android:icon="@drawable/icon_set"
        android:title="設定" />
    <item
        android:id="@+id/nav5"
        android:icon="@drawable/icon_share"
        android:title="分享" />
</menu>

如果想要點擊時跟換Icon可以在res/drawable創建每個item各自的xml將點擊前與點擊後的Icon畫面寫進去在套用進android:icon就可以了

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--點擊前的Icon-->
    <item android:state_checked="false" android:drawable="@android:drawable/btn_star_big_on"/>
    <!--點擊後的Icon-->
    <item android:state_checked="true" android:drawable="@drawable/ic_launcher_foreground"/>
</selector>

點擊後改變字體大小

res/values創建個xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--點擊後的字體大小-->
    <style name="bottom_tab_title_active">
        <item name="android:textSize"> 20dp </item>
    </style>
    
    <!--點擊前的字體大小-->
    <style name="bottom_tab_title_inactive">
        <item name="android:textSize">14dp</item>
    </style>
</resources>

個別套用到屬性中
itemTextAppearanceActive與itemTextAppearanceInactive

app:itemTextAppearanceActive="@style/bottom_tab_title_active"
app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive"

labelVisibilityMode 文字的顯示模式

• auto

  item數量在三個及以下顯示Icon與文字，三個以上只有選中的item會顯示Icon與文字，其餘只顯示Icon

• selected

  只有選中的item會顯示Icon與文字，其餘只顯示Icon

• labeled

  所有item都顯示Icon與文字

• unlabeled

  只顯示Icon不顯示文字

點擊事件OnNavigationItemSelectedListener

nav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.nav1:
                    textView.setText("點選相機");
                    break;
                case R.id.nav2:
                    textView.setText("點選下載");
                    break;
                case R.id.nav3:
                    textView.setText("點選音樂");
                    break;
                case R.id.nav4:
                    textView.setText("點選設定");
                    break;
                case R.id.nav5:
                    textView.setText("點選分享");
                    break;
            }
            return true;
        }
    });

完整程式碼

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemBackground="@color/teal_200"
        app:itemIconSize="25dp"
        app:itemIconTint="#F50000"
        app:itemRippleColor="#FF8B8B"
        app:itemTextAppearanceActive="@style/bottom_tab_title_active"
        app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive"
        app:itemTextColor="#FFE500"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:menu="@menu/navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.bottomnavigtionview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView textView = findViewById(R.id.textView);
        BottomNavigationView nav = findViewById(R.id.nav);
        //nav.getMenu().setGroupCheckable(0,false,false);     //取消他元件自帶的動畫
        //nav.getMenu().getItem(1).setEnabled(false);     //使左邊數來第二個元件呈現不可點擊狀態

        nav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav1:
                        textView.setText("點選相機");
                        break;
                    case R.id.nav2:
                        textView.setText("點選下載");
                        break;
                    case R.id.nav3:
                        textView.setText("點選音樂");
                        break;
                    case R.id.nav4:
                        textView.setText("點選設定");
                        break;
                    case R.id.nav5:
                        textView.setText("點選分享");
                        break;
                }
                return true;
            }
        });
    }
}

最終成果